<template>
	<view>

		<view class="top">
			<view>本房产信息来源于链家网的推送...</view>
			<view>2018-12-17</view>
		</view>
		<view class="box">
			<view class="row">
				<view class="row-left">所在区域</view>
				<view class="row-right"><input type="text" placeholder="请输入子女年龄" /> </view>
			</view>
			<view class="row">
				<view class="row-left">房产面积</view>
				<view class="row-right"><input type="text" placeholder="请输入房产面积" /> 平方米</view>
			</view>

		</view>
		<view class="canvas-box">
			<view class="canvas-box-top">计算结果</view>
			<view class="canvas-box-sec">
				<view class="left">
					<view class="left-top">房产平均价值</view>
					<view class="left-bot"><label class="number">780</label>万元</view>
				</view>
				<view class="left">
					<view class="left-top">租赁价格</view>
					<view class="left-bot"><label class="number">5200</label>元/月</view>
				</view>
			</view>
			<view class="container">


				<view class="canvasView">
					<view class="canvas-bar">
						<view class="tuijian"><label class="icon iconfont">&#xe619;</label>私募<label class="num">预期利率7%</label></view>
					</view>
					<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
					<view class="tuli">
						<view class="tuli-item">
							<view>房产收入=租金收入+增值收入</view>
							<view  class="tuli-line line-color">投资收入</view>
						</view>
						<view class="tuli-item">
							<view>投资收入 =所选金融产品收入</view>
							<view class="tuli-line">房产收入</view>
						</view>
					</view>
				</view>
				<view class="canvasView">
					<view class="canvas-bar">
						<view class="tuijian"><label class="icon iconfont">&#xe619;</label>固定收益<label class="num">预期利率7%</label></view>
					</view>

					<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
					<view class="tuli">
						<view class="tuli-item">
							<view>房产收入=租金收入+增值收入</view>
							<view  class="tuli-line line-color">投资收入</view>
						</view>
						<view class="tuli-item">
							<view>投资收入 =所选金融产品收入</view>
							<view class="tuli-line">房产收入</view>
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box.vue";
	import * as echarts from '@/components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';
	const cityList = [{
		value: 25,
		name: '浮动收益 25%'
	}, {
		value: 10,
		name: '保险保障 10%'
	}, {
		value: 15,
		name: '流动性资产 15%'
	}, {
		value: 10,
		name: '风险对冲资产 10%'
	}, {
		value: 20,
		name: '固定收益 20%'
	}];



	let lineOption = {
		animation: false,
		color: ['rgba(196,156,90,1)', 'rgba(44,43,41,1)'],
		grid: {
			x: 35,
			x2: 10,
			y: 30,
			y2: 25
		},
		calculable: false,
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		}],
		yAxis: [{
			type: 'value',
			splitArea: {
				show: true
			}
		}],
		series: [{
			name: '蒸发量',
			type: 'line',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		}, {
			name: '降水量',
			type: 'line',
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		}]
	};


	let pieOption = {
		animation: false,
		color: ['rgba(196,156,90,1)', 'rgba(44,43,41,1)'],
		grid: {
			x: 35,
			x2: 10,
			y: 30,
			y2: 25
		},
		calculable: false,
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		}],
		yAxis: [{
			type: 'value',
			splitArea: {
				show: true
			}
		}],
		series: [{
			name: '蒸发量',
			type: 'line',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		}, {
			name: '降水量',
			type: 'line',
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		}]
	};


	export default {
		components: {
			uniNumberBox,
			mpvueEcharts
		},

		data() {
			return {
				echarts: echarts,
				updateStatus: false
			};
		},
		onLoad() {

		},
		methods: {
			updatePie() {
				// 参考 mpvue-charts 的懒加载示例
				// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue

				if (this.updateStatus) {
					return;
				}
				pieOption.series[0].data.push({
					value: 20,
					name: '武汉'
				});
				pieOption.series[0].data.push({
					value: 10,
					name: '杭州'
				});
				this.$refs.pieChart.init();
				this.updateStatus = true;
			},
			pieInit(canvas, width, height) {
				let pieChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(pieChart)

				pieChart.setOption(pieOption)
				return pieChart
			},
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)

				lineChart.setOption(lineOption)
				return lineChart
			}
		}
	}
</script>

<style>
	.top {
		line-height: 35px;
		padding: 0 30upx 0 19upx;
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.box {
		padding: 0 30upx;
		background: rgb(255, 255, 255);
	}

	.row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 54px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);

	}

	.row-left {
		font-size: 15px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.row-right {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		margin-left: 14px;

	}

	.canvas-box {
		padding: 25px 30upx 0;
		background: rgb(255, 255, 255);
	}

	.canvas-box-top {
		text-indent: 10px;
		font-size: 17px;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		border-left: 4px solid rgba(203, 147, 89, 1);

	}

	.canvas-box-sec {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 84px;
	}

	.left-top {
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.left-bot .number {
		font-size: 26px;
		font-weight: bold;
		color: rgba(68, 68, 68, 1);
	}

	.page-section-title {
		width: 690upx;
		flex-direction: row;
		justify-content: space-between;
		height: 55px;
		align-items: center;
		border-bottom: 1px solid rgba(238, 238, 238, 1);

	}

	.title {
		font-size: 17px;

		font-weight: bold;
		color: #444444;
		border-left: 4px solid rgba(203, 147, 89, 1);
		text-indent: 10px;
	}

	.btn {
		border: 1px solid rgba(196, 156, 90, 1);
		border-radius: 20px;
		color: rgba(196, 156, 90, 1);
		padding: 3px 10px;
		font-size: 12px
	}

	.container {
		width: 100%;
		padding: 0 30upx 30upx;
		box-sizing: border-box;

	}

	.container,
	.canvasView {
		width: 100%;
		flex: 1;
		flex-direction: column;
	}

	.canvasView canvas {
		height: 400upx;
	}

	.navigate {
		color: #007AFF;
	}

	.canvas-bar {
		display: flex;
		flex-direction: row;

		height: 55px;
		align-items: center;
	}

	.tuijian {
		font-size: 15px;

		font-weight: bold;
		color: rgba(196, 156, 90, 1);
	}
	.icon{
		font-weight: 100;
		margin-right: 5px;
	}
	.num {
		font-size: 12px;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-left: 15upx;
	}
	.tuli-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color:rgba(51,51,51,1);
		line-height: 25px;
		position: relative;
	}
	.tuli-line::before{
		content: '';
		position: absolute;
		top: 50%;
		right: 60px;
		box-sizing: border-box;
		height: 2px;
		width: 30px;
		background: #000000;
	}
	.tuli-line.line-color::before{
		background: rgba(196,156,90,1);
	}
</style>
